<template>
  <div class="static">
    <div class="contain-header">
      <span title='数据统计'>数据统计<i class="arrow"></i></span>
    </div>
    <div class="contain-body clearfix">
      <div class="all-message clearfix">
        <div class="one-message normal-shadow" :class='`line-${color[key]}`' v-for='(value, key) in this.message'>
          <i class='glyphicon' :class='`glyphicon-${key === "monthUser" || key === "totalUser" ? "android" : "download"}`'></i>
          <div class="huge">
            {{key === 'monthUser' || key === 'addload' ? '+' : ''}}{{alldata[key] || 0}}
          </div>
          <div class="zhongwen">
            {{mess[key]}}
          </div>
        </div>
      </div>
      <div class="btn-group">
        <div class="el-button el-button--theme">
          查看用户数
        </div>
        <div class="el-button el-button--default" disabled="display">
          查看下载量
        </div>
      </div>
      <div class="data-sta">
        <div class="data-sta--left normal-shadow">
          <div class="last-week">
            <span>周用户活跃量</span>
            <div class="text-theme active">
                {{this.alldata.tomNumber}}
            </div>
            <span :class='`text-${this.alldata.tomPercentage <= 0 ? "success" : "danger"}`'>{{this.alldata.tomPercentage}}%</span>
            <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp同比昨日</span>
          </div>
          <div class="last-month">
            <span>月用户活跃量</span>
            <div class="text-theme active">
                {{this.alldata.monthNumber}}
            </div>
            <span :class='`text-${this.alldata.monthPercentage <= 0 ? "success" : "danger"}`'>{{this.alldata.monthPercentage}}%</span>
            <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp同比上月</span>
          </div>
        </div>
        <div class="data-sta--right normal-shadow">
            <div class="clearfix">
              <span style="line-height: 36px">活跃用户统计</span>
              <div class="datepicker">
                <el-date-picker
                  v-model="dataTime"
                  type="daterange"
                  format="yyyy-MM-dd"
                  @change="getChart"
                  placeholder="选择日期范围">
                </el-date-picker>
              </div>
            </div>
            <div id="datastatic">

            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'hello',
  data () {
    return {
      message: {
        monthUser: 2000,
        totalUser: 1000,
        addload: 3000,
        allload: 4000
      },
      mess: {
        monthUser: '本月新增用户数',
        totalUser: '用户总数',
        addload: '本月下载量',
        allload: '总下载量'
      },
      dataTime: [],
      color: {
        monthUser: 'success',
        totalUser: 'warning',
        addload: 'theme',
        allload: 'danger'
      },
      alldata: {
        totalUser: 0,
        monthUser: 0,
        tomNumber: 0,
        monthNumber: 0,
        tomPercentage: 0,
        monthPercentage: 0
      }
    }
  },
  mounted () {
    this.datastatic = echarts.init(document.getElementById('datastatic'))
    this.datastatic.setOption(this.setOptions())
    this.$http('get', 'subscriber')
    .then((data) => {
      this.alldata = data.result
    })
  },
  methods: {
    setOptions (data) {
      /* eslint-disable no-new */
      data = data || {[new Date().format('yyyy-MM-dd')]: 0}
      let danwei = Object.keys(data) || []
      let zhi = []
      Object.keys(data).forEach(function (key, value) {
        zhi.push(data[key])
      })
      let option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: danwei
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '用户活跃数',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {
                    normal: {
                      color: '#488eff'
                    }
                  },
                  lineStyle: {
                    normal: {
                      color: '#488eff'
                    }
                  },
                  itemStyle: {
                      normal: {
                          color: '#488eff'
                      }
                  },
                  data: zhi,
                  smooth: true
              }
          ]
      }
      return option
    },
    getChart () {
      this.$http('get', 'report', {
        begin: this.dataTime[0].format('yyyy-MM-dd'),
        end: this.dataTime[1].format('yyyy-MM-dd')
      })
      .then((data) => {
        if (data.code === 1) {
          this.datastatic.setOption(this.setOptions(data.result))
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .static{
    .all-message{
      .one-message{
        width: 255px;
        height: 110px;
        float: left;
        border-radius: 5px;
        padding: 20px;
        color: white;
        box-sizing: border-box;
        i{
          float: left;
          font-size: 60px;
          margin-right: 20px;
        }
        .huge{
          font-size: 28px;
        }
        .zhongwen{
          margin-top: 5px;
          font-size: 18px;
        }
      }
      .one-message + .one-message{
        margin-left: 39px;
      }
    }
    .btn-group{
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .data-sta{
      color: #333;
      .data-sta--left{
        float: left;
        width: 265px;
        height: 515px;
        border: 1px solid #edeef2;
        padding: 20px 10px;
        box-sizing: border-box;
        .last-week{
          margin-bottom: 40px;
        }
        .active{
          padding: 20px 0;
          font-size: 35px;
        }
      }
      .data-sta--right{
        float: left;
        height: 515px;
        width: 845px;
        padding: 20px;
        border: 1px solid #edeef2;
        box-sizing: border-box;
        margin-left: 25px;
        .datepicker{
          float: right;
        }
        #datastatic{
          height: 400px;
        }
      }
    }
  }
</style>
